<template>
  <div class="container">
    <div class="row">
      <div class="col">起步价：</div>
      <div class="col">{{detail.beginAmount}}元</div>
    </div>
    <div class="row">
      <div class="col">起步时长：</div>
      <div class="col">{{detail.beginTiming}}分钟</div>
    </div>
    <div class="row">
      <div class="col">起步里程：</div>
      <div class="col">{{detail.beginMileage}}公里</div>
    </div>
    <div class="row">
      <div class="col">保险费：</div>
      <div class="col">{{detail.insuranceAmount}}元</div>
    </div>
    <div class="row">
      <div class="col">里程费：</div>
      <div class="col">{{detail.mileageAmount}}元/公里</div>
    </div>
    <div class="row">
      <div class="col">白天时长费：</div>
      <div class="col">{{detail.minuteAmount}}元/分钟</div>
    </div>
  </div>
</template>  

<script>
  import App from '../../App'
  import Service from '@/utils/service'
  import {canvasArea, getUrlParam} from '@/utils/index'
  export default {
    data() {
      return {
        detail: {}
      }
    },
    onLoad(options) {
      this.getDetail(options.bikeId)
    },
    methods: {
      getDetail(bikeId) {
        let data = {
          bikeId,
        }
        Service.chargeDetail(data).then(res => {
          console.log(res)
          if(res.code === 200) {
            this.detail = res.data
          }
        })
      }
    }
  }
</script>  

<style lang="stylus" scoped>
  .row {
    display flex
    justify-content space-between
    line-height 100px
    padding 0 40px
    border-bottom 2px solid #ccc
    .col:last-of-type {
      color red
    }
  }
</style>